<!--
 * @Descripttion:  招商管理-意向客户管理 item
 * @version: 
 * @Author: lehaixia
 * @Date: 2023-04-19 11:33:24
 * @LastEditors: lehaixia
 * @LastEditTime: 2023-06-13 13:24:46
-->
<template>
  <div class="list-item" @click="onDetail">
    <div class="i-top">
      <span class="color-black">{{ itemData.customerName }} {{ filterPhone(itemData.customerPhone) }}</span>
      <span class="right">{{ getDictName('CTM_INTEND_CUS_FOLLOW_UP_PROGRESS', itemData.followUpStage) }}</span>
    </div>
    <div class="content">
      <div>
        <span class="label">意向加盟城市：</span>
        <span class="color-black value">{{ itemData.intendedCity }}</span>
      </div>
      <div>
        <span class="label">招商经理：</span><span class="color-black value">{{ itemData.managerName }}</span>
      </div>
      <div>
        <span class="label">所属办事处：</span>
        <span class="color-black value">{{ itemData.agencyName }}</span>
      </div>
      <div>
        <span class="label">意向经营业务：</span>
        <span class="color-black value">{{ intendedBusiness }}</span>
      </div>
      <div>
        <span class="label">意向客户分类：</span>
        <span class="color-black value">{{ getDictName('CTM_TOBE_CUSTOMER_TYPE', itemData.customerType) }}</span>
      </div>
    </div>
    <div class="btns" v-if="itemData.followUpStage === 'A'">
      <div class="btn radius-larg ctm-btn-grey-outline" @click.stop="onStop">终止</div>
      <div class="btn radius-larg ctm-btn-grey-outline" @click.stop="onEdit">编辑</div>
      <div class="btn radius-larg ctm-btn-main-outline" @click.stop="onAllocation">分配</div>
    </div>
    <div class="btns" v-if="itemData.followUpStage === 'B'">
      <div class="btn radius-larg ctm-btn-grey-outline" @click.stop="onAllocation">重新分配</div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed } from 'vue'
  import { filterPhone } from '@/utils'
  export default defineComponent({
    name: 'PotentialCustomerItems',
    props: {
      itemData: {
        type: Object,
        default: () => {}
      },
      dictData: {
        type: Object,
        default: () => {}
      }
    },
    setup(props, { emit }) {
      const onStop = () => {
        emit('stop')
      }

      const onAllocation = () => {
        emit('allocation')
      }
      const onEdit = () => {
        emit('edit')
      }
      const onDetail = () => {
        emit('detail')
      }

      const intendedBusiness = computed(() => {
        const { intendedBusiness } = props.itemData
        if ([undefined, null, ''].includes(intendedBusiness)) return ''
        const dictList = props.dictData['BIZ_TYPE'] || []

        const codes = intendedBusiness.split(',')

        let name: any = []
        if (dictList.length > 0) {
          codes.forEach((code: string) => {
            const obj = dictList.find((v: any) => v.dictCode === `${code}`)
            name.push(obj?.dictName || code)
          })
        }
        return name.join(',')
      })

      const getDictName = (dictType: string, code: any) => {
        if (!dictType || [undefined, null, ''].includes(code)) return ''
        let name = code
        const dictList = props.dictData[dictType] || []
        if (dictList.length > 0) {
          const obj = dictList.find((v: any) => v.dictCode === `${code}`)
          name = obj?.dictName || code
        }
        return name
      }
      return {
        onEdit,
        onStop,
        onAllocation,
        onDetail,
        getDictName,
        intendedBusiness,
        filterPhone
      }
    }
  })
</script>
<style lang="less" scoped>
  .list-item {
    margin-bottom: 8px;
    padding: 16px;
    background: var(--bg-global-weaker);
    border-radius: 8px;
    font: var(--font-main-body);
    color: var(--texticon-default-stronger);

    .i-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 20px;
      font: var(--font-main-title-strengthen);

      .right {
        color: var(--texticon-color-secondary-normal);
        font: var(--font-main-body);
      }
    }

    .content {
      margin-top: 8px;
      margin-bottom: 16px;
      div {
        padding: 2px 0;
        display: flex;
        // justify-content: space-between;

        font: var(--font-main-body);
        color: var(--texticon-default-stronger);
        line-height: 20px;

        .label {
          min-width: 70px;
          flex: 0 0 auto;
        }

        .value {
          text-align: right;
          margin-left: 16px;
          flex: 1 1 auto;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: right;
        }
      }
    }

    .btns {
      display: flex;
      justify-content: flex-end;
      .btn {
        width: 88px;
        height: 36px;
        margin-left: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>
